<template>
    <page-container>
        <!-- 顶部数据卡片 -->
        <el-row :gutter="20">
            <el-col :span="6">
                <el-card shadow="hover" class="data-card">
                    <template #header>
                        <div class="card-header">
                            <span>待处理简历</span>
                            <el-icon><Document /></el-icon>
                        </div>
                    </template>
                    <div class="card-content">
                        <span class="number">{{ statistics.pendingResumes }}</span>
                        <span class="unit">份</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="data-card">
                    <template #header>
                        <div class="card-header">
                            <span>今日面试</span>
                            <el-icon><Calendar /></el-icon>
                        </div>
                    </template>
                    <div class="card-content">
                        <span class="number">{{ statistics.todayInterviews }}</span>
                        <span class="unit">场</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="data-card">
                    <template #header>
                        <div class="card-header">
                            <span>在招职位</span>
                            <el-icon><Briefcase /></el-icon>
                        </div>
                    </template>
                    <div class="card-content">
                        <span class="number">{{ statistics.openPositions }}</span>
                        <span class="unit">个</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="data-card">
                    <template #header>
                        <div class="card-header">
                            <span>人才库</span>
                            <el-icon><UserFilled /></el-icon>
                        </div>
                    </template>
                    <div class="card-content">
                        <span class="number">{{ statistics.talentPoolCount }}</span>
                        <span class="unit">人</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 图表区域 -->
        <el-row :gutter="20" style="margin-top: 20px">
            <!-- 简历投递趋势 -->
            <el-col :span="12">
                <el-card shadow="hover">
                    <template #header>
                        <div class="card-header">
                            <span>近7天简历投递趋势</span>
                        </div>
                    </template>
                    <div ref="trendChartRef" style="width: 100%; height: 300px;"></div>
                </el-card>
            </el-col>
            <!-- 职位投递TOP5 -->
            <el-col :span="12">
                <el-card shadow="hover">
                    <template #header>
                        <div class="card-header">
                            <span>职位投递排行TOP5</span>
                        </div>
                    </template>
                    <div ref="rankChartRef" style="width: 100%; height: 300px;"></div>
                </el-card>
            </el-col>
        </el-row>
    </page-container>
</template>

<script setup>
import { ref, onMounted, nextTick, onUnmounted } from 'vue'
import { Document, Calendar, Briefcase, UserFilled } from '@element-plus/icons-vue'
import PageContainer from '@/components/PageContainer.vue'
import * as echarts from 'echarts'
import { getDashboardData } from '@/api/dashboard'

const trendChartRef = ref(null)
const rankChartRef = ref(null)
let trendChart = null
let rankChart = null

const statistics = ref({
    pendingResumes: 0,
    todayInterviews: 0,
    openPositions: 0,
    talentPoolCount: 0
})

// 简历投递趋势图配置
const resumeChartOption = ref({
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '投递数量',
            type: 'line',
            smooth: true,
            data: [],
            itemStyle: {
                color: '#409EFF'
            }
        }
    ]
})

// 职位投递排行图配置
const positionChartOption = ref({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '15%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: [],
        axisLabel: {
            formatter: function(value) {
                if (value.length > 8) {
                    return value.substring(0, 8) + '...';
                }
                return value;
            },
            interval: 0,
            margin: 8
        },
        inverse: true
    },
    series: [
        {
            name: '投递数量',
            type: 'bar',
            data: [],
            barWidth: '60%',
            itemStyle: {
                color: '#67C23A'
            },
            label: {
                show: true,
                position: 'right'
            }
        }
    ]
})

// 初始化图表
const initCharts = () => {
    // 初始化趋势图
    if (trendChartRef.value && !trendChart) {
        trendChart = echarts.init(trendChartRef.value)
        trendChart.setOption(resumeChartOption.value)
    }
    
    // 初始化排行图
    if (rankChartRef.value && !rankChart) {
        rankChart = echarts.init(rankChartRef.value)
        rankChart.setOption(positionChartOption.value)
    }
}

// 加载数据
const loadDashboardData = async () => {
    try {
        const res = await getDashboardData()
        if (res.code === 200) {
            // 更新统计数据
            statistics.value = res.data.statistics
            
            // 更新图表配置
            resumeChartOption.value.xAxis.data = res.data.resumeTrend.map(item => item.submitDate) || []
            resumeChartOption.value.series[0].data = res.data.resumeTrend.map(item => item.count) || []
            
            positionChartOption.value.yAxis.data = res.data.positionRanking.map(item => item.positionName)
            positionChartOption.value.series[0].data = res.data.positionRanking.map(item => item.submitQuantity)
            
            // 等待 DOM 更新后初始化图表
            await nextTick()
            initCharts()
            // 更新图表数据
            trendChart?.setOption(resumeChartOption.value)
            rankChart?.setOption(positionChartOption.value)
        }
    } catch (error) {
        console.error('获取数据失败：', error)
    }
}

// 监听窗口大小变化
// window.addEventListener('resize', () => {
//     trendChart?.resize()
//     rankChart?.resize()
// })

// 组件卸载时销毁图表
// onUnmounted(() => {
//     trendChart?.dispose()
//     rankChart?.dispose()
//     window.removeEventListener('resize', handleResize)
// })

onMounted(() => {
    nextTick(() => {
        initCharts()
        loadDashboardData()
    })
})
</script>

<style scoped>
.data-card {
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        color: #606266;
    }
    
    .card-content {
        text-align: center;
        padding: 10px 0;
        
        .number {
            font-size: 28px;
            font-weight: bold;
            color: #303133;
            margin-right: 5px;
        }
        
        .unit {
            font-size: 14px;
            color: #909399;
        }
    }
}
</style>
